<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

          <script>
               
                //on 订阅 emit发布
             
             class Observer{
                 constructor(){
                    this.message={}
                 }
                 //type  我拜托你看着的行为  fm行为发生后调用的函数
                 $on(type,fm){
                    //先判断有没有这个属性  没有就创建  有就push
                    if(!this.message[type]){
                        this.message[type]=[]
                    }
                    this.message[type].push(fm)

                 }
                 $emit(type,fm){
                    //
                    if(!this.message[type]) return
                    if(fm){
                        this.message[type].forEach(item => {
                         if(item==fm){
                            item()
                         }   
                        
                    });
                        return
                    } 
                    this.message[type].forEach(item => {
                        item()
                    });


                 }


                 $off(type,fm){
                     if(!this.message[type]) return
                     if(!fm) {
                        this.message[type]=undefined
                        return
                     }
                     this.message[type]=this.message[type].filter(item=>item!=fm)

                 }


             }

             const person=new Observer()
             //现在向person委托一些事件帮我观察
          
             function handelA(){
                 console.log('handelA')
             }
             function handelB(){
                 console.log('handelB')
             }
             function handelC(){
                 console.log('handelC')
             }

             person.$on('abc',handelA)
             person.$on('abc',handelB)   
            //  person.$off('abc')  
           // person.$off('abc',handelB)  
             //person.$emit('abc',handelA)
             person.$emit('abc')    
             console.log(person)




          </script>
 

</body>
</html>